<template>
	<scroll-view>
		<view class="my-content">
			<my-navbar :alpha="alpha" :datas="userinfo"></my-navbar>
			<my-heard :url="image"></my-heard>
			<my-info></my-info>


			<!-- <text v-for="item in 100" :key='item' class="title">{{item}}1112221</text> -->
			<view :style="'height:'+ widowHeight+'px;'" class="my-content-cc">
				<view class="my-content-cc-tab">

					<scroll-view scroll-x class="scroll-view" >
						<view class="scroll-view-content">
							<view class="test-tab" v-for="(item,index) in  questionList" :key="index"
								@click="setPages(index)" :class="{active:index === activeIndex}">
								{{item}}
							</view>
						</view>
					</scroll-view>
				</view>
				<swiper class="classify-swipe" @change="changeswiper" :current="activeIndex">
					<swiper-item v-for="(item,index) in  questionList" :key="index" class="swiper-item">
						<!-- <view class=" uni-calendarx"> -->
							<my-404></my-404>
						<!-- </view> -->
					</swiper-item>
				</swiper>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				questionList: ['笔记本', '视频', '计划', '反馈记录'],
				activeIndex: 0,
				viewId: 0,
				alpha: 0,
				statusBarHeightzz: '',
				widowHeight: '',
				navBarHeight: 40,
				image:{},
			}
		},
		created() {
			this.get_images(1, "我的背景图")
			// 同步获取手机信息 , statusBarHeight 为导航栏的高度
			const info = uni.getSystemInfoSync();
			// 给状态栏赋值当前手机的状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.widowHeight = info.windowHeight
			// console.log(this.widowHeight, info);
			// H5 app mp-alipay 不支持当前API需要写条件编译
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			//获取小程序中 的胶囊位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// 自动获取小程序的navbar的高度 = (胶囊底部高度 - 状态栏高度) + (胶囊顶部高度 - 状态栏高度)
			let navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
			this.navBarHeight = navBarHeight
			// console.log(navBarHeight);
			// #endif
			console.log(this.widowHeight , info.windowBottom , this.statusBarHeight , this.navBarHeight);
			this.widowHeight = this.widowHeight - (info.windowBottom || 0) - this.statusBarHeight - this.navBarHeight
			
			// #ifdef H5
			this.widowHeight = info.windowHeight
			// #endif
			console.log(this.widowHeight, info);
		},
		computed: {
			...mapState(['user_id', 'userinfo'])
		},
		onPageScroll(res) {
			if (res.scrollTop >= 230) {
				this.alpha = 1
			}
			if (res.scrollTop < 230) {
				this.alpha = res.scrollTop / 230
				// console.log(this.alpha);

			}
			// console.log(res,'ssssss');get_userinfo
		},
		methods: {
			async get_images(mysize1,type){
				let imagesList = await this.$api.get_images({
					mysize1: mysize1,
					type: type
				})
				if (!imagesList) return false;
					this.image = imagesList[0]
				console.log(imagesList);
			},
			changeswiper(e) {
				const {
					current
				} = e.detail
				this.activeIndex = current
				console.log(this.viewId);
			},
			setPages(i) {
				this.activeIndex = i
			},
		}
	}
</script>

<style scoped lang="scss">
	.scroll-view {
		overflow: hidden;
		box-sizing: border-box;
	}
	.classify-swipe{
		height: 100%;
	}
	.scroll-view-content {
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		height: 30px;
		margin-right: 5px;

		.test-tab {
			// background-color: #007AFF;
			min-width: 30px;
			color: #666;
			// border: 1px solid #ddd;
			border-radius: 5px;
			flex: 1;
			margin-left: 5px;
			text-align: center;

			box-sizing: border-box;
		}

		// flex-direction: row;
		.scroll-view-item {
			flex-shrink: 0;
			padding: 0 10px;
			color: #333;
			font-size: 14px;

			&.active {
				color: $uni-color-warning;
			}
		}
	}


	.my-content {
		display: flex;
		flex-direction: column;
		.my-content-cc {
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
		}

		.my-content-cc-tab {
			border-bottom: 1px solid #f0f0f0;
		}
	}
	.test-tab{
		position: relative;
		flex: 1;
	}
	.active {
		color: $my-bg-color !important;
		
		&::after{
			content: '';
			height: 4px;
			width: 100%;
			position: absolute;
			bottom: -6px;
			left: 0;
			right: 0;
			background-color: $my-bg-color;
		}
	}
</style>
